<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="utf-8">
<title>组群聊-群聊页</title>
<link href="../c/base.css" rel="stylesheet" type="text/css">
<link href="../c/toefl.css" rel="stylesheet" type="text/css">
<link href="../c/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../alert/Fytx_Tips.css" rel="stylesheet" type="text/css" />
<script src="../j/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <!--配置样式（也可以默认使用）-->
    <script type="text/javascript" src="../alert/Fytx_Tips_Config.js"></script>
    <!--美化脚本程序-->
    <script type="text/javascript" src="../alert/Fytx_Tips.js"></script>
</head>

<body>


<div class="doc1180 fn-clear">
	<div class="crumbs_patch">
        <div class="crumbs_patch" th:switch="${editgroup.group_type}">
            <a href="###" th:case="1">同城考试群</a>
            <a href="###" th:case="2">考试场次群</a>
            <a href="###" th:case="3">名师学堂群群</a>
            <a href="###" th:case="4">名师备考群</a>》
            <a href="###" th:text="${editgroup.group_name}"></a>》
            <span>群聊</span>
        </div>
    <div class="qzl_CyTop">
        <form action="editGroup" method="post" id="editForm">
            <input name="group_id" id="group_id" type="hidden" th:value="${editgroup.group_id}">
    	<div class="qzl_CyInfo">
        	<ul>
            	<li class="qzl_CyInfoLeft"><div class="qzl_CyInfoPic"><img id="headimg" th:src="${editgroup.img_url}"></div></li>
                <li class="qzl_CyInfoMid">
                	<div class="qzl_CyInfoMain">
                    	<input type="text" th:value="${editgroup.group_name}" name="group_name" id="group_name" class="form-control" style="width: 300px;height: 50px;">
                        <div class="qzl_CyInfoTime"><span>建群时间:[[${#dates.format(editgroup.create_time,'yyyy-MM-dd')}]]</span>|<span><b class="blue">[[${editgroup.count}]]</b>人已加入此群</span></div>
                    </div>
                </li>
                <li class="qzl_CyInfoRight">
                    <a class="qzl_CyInfoBut" id="pic" href="###" style="cursor: pointer">群头像</a>
                    <input id="upload" name="file" accept="image/*" type="file" style="display: none">
                    <input id="img_url" type="hidden" name="img_url" th:value="${editgroup.img_url}"/>
                </li>
            </ul>
            <dl class="qzl_CyInfoDl">
            	<dt>群介绍</dt>
                <textarea class="form-control" id="group_desc" name="group_desc" style="width: 600px;height: 200px;" th:text="${editgroup.group_desc}"></textarea>
            </dl>
            <dl class="qzl_CyInfoDl">
            	<dt>群规则</dt>
                <textarea class="form-control" id="group_rule" name="group_rule" style="width: 600px;height: 200px;" th:text="${editgroup.group_rule}"></textarea>
            </dl>
            <div>
            	<button class="btn btn-success">保存</button>	
            </div>
        </div>
        </form>
     </div>
    <div class="fn-clear">
    	<div class="qzl_CyTeamLeft">
            <div class="qzl_CyTeam">
                <div class="qzl_CyTeamTitle"><h3>管理员</h3></div>
                <div class="qzl_CyTeamBody">
                    <ul th:each=" a,aStat:${applyn}">
                        <li >
                            <div class="qzl_CyTeamPic"><img th:src="${a.user.img_url}"></div>
                            <div class="qzl_CyTeamName"> <input type="checkbox" th:id="'box2_'+${aStat.index}" th:value="${a.apply_id}"/> [[${a.user.login_name}]]</div>
                            <div class="mangerType" th:onclick="showApply([[${a.apply_desc}]])" style="cursor: pointer">申请</div>
                        </li>
                    </ul>
                    <ul th:each="a,aStat:${groupadmins}">
                        <li>
                        <div class="qzl_CyTeamPic"><img th:src="${a.user.img_url}"></div>
                        <div class="qzl_CyTeamName"> <input type="checkbox" th:id="'box1_'+${aStat.index}" th:value="${a.group_admin_id}"/> [[${a.user.login_name}]]</div>
                        </li>
                    </ul>
                </div>
                <div style="width: 200px;float: right;">
                	<a class="btn btn-success" id="pass">通过</a>
                	<a class="btn btn-warning" id="back">退回</a>
                	<a class="btn btn-danger" id="delete1">删除</a>
                </div>
            </div> 
        </div>
        
    </div>
    <div class="qzl_CyTeam">
    	<div class="qzl_CyTeamTitle"><h3>群成员</h3></div>
        <div class="qzl_CyTeamBody">
            <ul class="qzl_CyTeam1200" th:each="u,userStat: ${groupusers}">
                <li >
                    <div class="qzl_CyTeamPic"><img th:src="${u.user.img_url}"></div>
                    <div class="qzl_CyTeamName"> <input type="checkbox" style="" th:id="'box_'+${userStat.index}" th:value="${u.group_admin_id}"/> [[${u.user.login_name}]]</div>
                </li>

            </ul>
        </div>
        <div style="width: 200px;float: right;">
                	<a class="btn btn-danger" id="delete">删除</a>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" th:inline="javascript">

    function showApply(s){
        $.toast(s,5,true);
    }

    $(function() {
        $("#pic").click(function() {
            $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#upload").on("change", function() {
                var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#headimg").attr("src", objUrl); //将图片路径存入src中，显示出图片
                    upimg();

                }
            });
        });
        var boxs  = $("input[type='checkbox'][id^='box_']");
        var boxs1  = $("input[type='checkbox'][id^='box1_']");
        var boxs2  = $("input[type='checkbox'][id^='box2_']");
        $("#delete").click(function(){
            /** 获取到用户选中的复选框  */
            var checkedBoxs = boxs.filter(":checked");
            if(checkedBoxs.length < 1){
                $.alert("","请选择一个需要删除的学员！");
            }else{
                /** 得到用户选中的所有的需要删除的ids */
                var ids = checkedBoxs.map(function(){
                    return this.value;
                })
                $.confirm("","确认要删除吗?");
                $.isok=function(){
                    window.location = "deleteGroupUser?ids=" + ids.get();

                }
            }
        });
        $("#delete1").click(function(){
            /** 获取到用户选中的复选框  */
            var checkedBoxs = boxs1.filter(":checked");
            if(checkedBoxs.length < 1){
                $.alert("","请选择一个需要删除的管理员！");
            }else{
                /** 得到用户选中的所有的需要删除的ids */
                var ids = checkedBoxs.map(function(){
                    return this.value;
                })
                $.confirm("","确认要删除吗?");
                $.isok=function(){
                    window.location = "deleteGroupUser?ids=" + ids.get();
                }
            }
        });
        $("#pass").click(function(){
            /** 获取到用户选中的复选框  */
            var checkedBoxs = boxs2.filter(":checked");
            if(checkedBoxs.length < 1){
                $.alert("","请选择需要通过的学员！");
            }else{
                /** 得到用户选中的所有的需要删除的ids */
                var ids = checkedBoxs.map(function(){
                    return this.value;
                })
                var gid =$("#group_id").val();
                $.confirm("","确认要通过申请吗?");
                $.isok=function(){
                    console.log([[${session.sess_user.teacher_id}]]);
                    window.location = "passGroupUser?ids=" + ids.get()+"&tid="+[[${session.sess_user.teacher_id}]]+"&gid="+gid;
                }
            }
        });
        $("#back").click(function(){
            /** 获取到用户选中的复选框  */
            var checkedBoxs = boxs2.filter(":checked");
            if(checkedBoxs.length < 1){
                $.alert("","请选择需要退回的学员！");
            }else{
                /** 得到用户选中的所有的需要删除的ids */
                var ids = checkedBoxs.map(function(){
                    return this.value;
                })
                var gid =$("#group_id").val();
                $.confirm("","确认要退回吗?");
                $.isok=function(){
                    window.location = "backGroupUser?ids=" + ids.get()+"&tid="+[[${session.sess_user.teacher_id}]]+"&gid="+gid;
                }
            }
        });

    });
    //建立可存取file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    //上传头像到服务器
    function upimg() {
        var pic = $('#upload')[0].files[0];
        var file = new FormData();
        file.append('image', pic);
        $.ajax({
            url: "/uploadImg",
            type: "post",
            data: file,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                console.log(data);
                var res = data;
                $("#img_url").val(res);
            }
        });
    }
    function checkSub() {
        var  group_name =$("#group_name").val();
        var img_url =$("#img_url").val();
        var group_desc =$("#group_desc").val();
        var group_rule =$("#group_rule").val();

        if (group_name ==""){
            $.alert("提示信息","群名称不能为空!");
            return false;
        }else if(group_desc ==""){
            $.alert("提示信息","群介绍不能为空!");
            return false;
        }else if(group_rule==""){
            $.alert("提示信息","群规则不能为空!");
            return false;
        }else{

            $("#editForm").submit();
            return true;
        }
    }


</script>
</body>
</html>
